/**@type {HTMLCanvasElement} */
var background_canvas = document.getElementById('background_canvas');
var pageCanvas = document.getElementById('page');
var background_context = background_canvas.getContext('2d');
var img = new Image();
/**看相册的按钮 */
const $start_button = document.getElementById("start_button");
/**整个canvas的div */
const $app = document.getElementById("app");
/**切换到视频界面的按钮 */
const $playVideoPage_button = document.getElementById("playvideo_button");


// -------------------预定义函数-------------------
/**坐标转换 */
function windowToCanvas(x, y) {
    var mystyle = window.getComputedStyle(canvas);
    var bbox = canvas.getBoundingClientRect();
    // 平移到canvas(含padding, border)
    x -= bbox.left;
    y -= bbox.top;
    //再平移到canvas(不含padding, border):两种写法均可
    //    x -= parseFloat(mystyle['border-left-width']);
    //    y -= parseFloat(mystyle['border-top-width']);
    //    x -= parseFloat(mystyle['padding-left']);
    //    y -= parseFloat(mystyle['padding-top']);
    //    写法2
    x -= parseFloat(mystyle.borderLeftWidth);
    y -= parseFloat(mystyle.borderTopWidth);
    x -= parseFloat(mystyle.paddingLeft);
    y -= parseFloat(mystyle.paddingTop);
    // 当canvas元素和drawing surface尺寸不一致，缩放drawing surface
    x *= (parseFloat(mystyle['width']) / canvas.width);
    y *= (parseFloat(mystyle['height']) / canvas.height);
    return {
        x: x,
        y: y
    };
}

// -------------------自定义函数-------------------
/**清除画布内容 */
function ClearCanvas(canvas) {
    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
}

/**初始化canvas */
function init() {
    img.src = './img/background.jpg';
    // background_context.clearRect(0, 0, background_canvas.width, background_canvas.height);
    // ClearCanvas(background_context);
    background_context.drawImage(pageCanvas, 0, 0, background_canvas.width, background_canvas.height);
    // $canvas.style.visibility = "hidden";
    // background_canvas.style.visibility = "hidden";
    // pageCanvas.style.visibility = "hidden";
    $app.style.visibility = "hidden";
}



// -------------------事件响应函数-------------------
/**画图片画到背景图上 */
img.onload = function () {
    background_context.drawImage(img, 0, 0, background_canvas.width, background_canvas.height);
}


// Look photos按钮的事件响应
$start_button.onclick = function () {
    // 将整个画布显示出来
    $app.style.visibility = "visible";
    // 将视频的画布隐藏并且暂停
    $div_video.style.visibility = "hidden";
    $video.pause();
    // 将留言板模块隐藏
    message.style.visibility = "hidden";
    messageTxt.style.visibility = "hidden";
    btn.style.visibility = "hidden";
}

// *****初始化****
init();